<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link th:replace="common/common :: common-head">
    <div th:replace="common/common :: #common-js"></div>
</head>
<body>

<div th:replace="common/common :: #common-nav-left"></div>
<div th:replace="common/common :: #common-header"></div>


<!--页面主要内容-->
<main class="lyear-layout-content" id="index">

    <div class="container-fluid">

        <div class="row">
            <div class="col-sm-6 col-lg-4">
                <div class="card bg-danger">
                    <div class="card-body clearfix">
                        <div class="pull-right">
                            <p class="h6 text-white m-t-0">用户总数</p>
                            <p class="h3 text-white m-b-0 fa-1-5x">{{data.total}}</p>
                        </div>
                        <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-account fa-1-5x"></i></span> </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-lg-4">
                <div class="card bg-success">
                    <div class="card-body clearfix">
                        <div class="pull-right">
                            <p class="h6 text-white m-t-0">下载总量</p>
                            <p class="h3 text-white m-b-0 fa-1-5x">34,005,000</p>
                        </div>
                        <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-arrow-down-bold fa-1-5x"></i></span> </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-lg-4">
                <div class="card bg-purple">
                    <div class="card-body clearfix">
                        <div class="pull-right">
                            <p class="h6 text-white m-t-0">新增留言</p>
                            <p class="h3 text-white m-b-0 fa-1-5x">153 条</p>
                        </div>
                        <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-comment-outline fa-1-5x"></i></span> </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">

            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header">
                        <h4>每周用户</h4>
                    </div>
                    <div class="card-body">
                        <canvas class="js-chartjs-bars"></canvas>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header">
                        <h4>交易历史记录</h4>
                    </div>
                    <div class="card-body">
                        <canvas class="js-chartjs-lines"></canvas>
                    </div>
                </div>
            </div>

        </div>

        <div class="row">

            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <h4>用户列表</h4>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th class="hide">用户ID</th>
                                    <th>用户名</th>
                                    <th>头像</th>
                                    <th>注册时间</th>
                                    <th>状态</th>
                                    <th>权限</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="item in data.data">
                                    <td class="hide">{{item.id}}</td>
                                    <td>{{item.name}}</td>
                                    <td><img :src="item.img" width="30" height="30"></td>
                                    <td>{{item.registerDate}}</td>
                                    <td>
                                        <span class="label label-primary" v-if="item.logoutStatus!=1">正常</span>
                                        <span class="label label-warning" v-else>已注销</span>
                                    </td>
                                    <td>
                                        <span class="text-info" v-if="item.authority==10000">普通用户</span>
                                        <span class="text-danger" v-else>管理员</span>
                                    </td>
                                    <!-- 操作 -->
                                    <td>
                                        <button class="btn btn-xs btn-info"><i class="far fa-edit"></i>修改</button>
                                        <button class="btn btn-xs btn-danger" @click="deleted(item.id)"><i class="far fa-trash-alt"></i>删除</button>
                                        <button class="btn btn-xs btn-default" @click="see(item.id)"><i class="far fa-eye"></i>查看</button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>

                        </div>
                        <div th:include="common/page :: page"></div>

                    </div>
                </div>
            </div>

        </div>

    </div>

</main>
<!--End 页面主要内容-->



<script th:src="@{/js/forum/user/list.js}"></script>
</body>
</html>